प्रतिक्रिया में ईमेलजेएस के साथ संपर्क फ़ॉर्म को एकीकृत करना

रिएक्ट फ्रंट-एंड एप्लिकेशन के लिए यूजर इंटरफेस बनाने के लिए एक फ्रंट-एंड लाइब्रेरी है। इसके अलावा, रिएक्ट आपके एप्लिकेशन बनाते समय मददगार होता है क्योंकि यह पुन: प्रयोज्य घटकों का उपयोग करता है।

फ्रंट-एंड डेवलपर्स के लिए हमेशा मौजूद प्रश्न यह है कि बैकएंड कार्यात्मकताओं को लिखे या ज्ञान के बिना फॉर्म डेटा से अनुरोधों को कैसे संभालना है। बैकएंड सर्वर बनाना थकाऊ हो सकता है, और इस कार्य के लिए तर्क लिखने के दर्द को कम करने के लिए किसी तृतीय-पक्ष सेवा का उपयोग करना आवश्यक है।

ईमेलजेएस क्या है?

ईमेलजेएस एक ऐसी सेवा है जो क्लाइंट-साइड एप्लिकेशन जैसे रिएक्ट, वीयू और एंगुलर का उपयोग करके ईमेल भेजने में मदद करती है, जिसमें कॉन्फ़िगरेशन और सेटअप के दौरान कोई सर्वर नहीं होता है।

इस ट्यूटोरियल में, आप सीखेंगे कि एक फ्रंट-एंड लाइब्रेरी, रिएक्ट, को ईमेलजेएस के साथ कैसे जोड़ा जाए, ताकि आप अपनी वेबसाइट या मोबाइल एप्लिकेशन पर उपयोगकर्ता संदेश प्राप्त कर सकें, बिना खरोंच से निर्माण के तनाव के।

डेमो

इस रिपॉजिटरी में स्टार्टर कोड के साथ शुरुआत करें या एक नया रिएक्ट एप्लिकेशन बनाएं।

आवश्यक शर्तें

ट्यूटोरियल के साथ पालन करने के लिए, आपके पास निम्नलिखित होना चाहिए:

• नोड>= 14.0.0 और npm>= 5.6 आपके स्थानीय मशीन पर स्थापित
• प्रतिक्रिया की मूल बातें की समझ
• एक ईमेलजेएस खाता सेवा को आज़माने के लिए।

शुरू करना

एक नई परियोजना के निर्माण का पहला कदम विकास के लिए उपकरण होना है जो इमारत को हवा देता है। अपने टर्मिनल में, यह कमांड चलाएँ:

npx create-react-app react-contact-form-with-emailjs

ऊपर दिया गया कमांड क्रिएट-रिएक्शन-ऐप कमांड का उपयोग करके बॉयलरप्लेट बनाता है जिसमें रिएक्ट ऐप के लिए सभी फाइलें और पैकेज होते हैं।

ईमेलजेएस स्थापित करना

एक निर्भरता के रूप में, ईमेलजेएस एसडीके को रिएक्ट ऐप में स्थापित करने के लिए कमांड चलाएँ।

npm install @emailjs/browser

प्रोजेक्ट चलाना

रिएक्ट एप्लिकेशन को चलाने के लिए, प्रोजेक्ट डायरेक्टरी में नेविगेट करें और डेवलपमेंट सर्वर चलाएं जो हॉट रीलोड फीचर के साथ शिप करता है, जो बदले में, डेवलपमेंट के दौरान किए गए किसी भी बदलाव के साथ एप्लिकेशन को अपडेट करता है।

यह आदेश चलाएँ:

 cd react-contact-form-with-emailjs npm start

एप्लिकेशन http://localhost:3000 पर उपलब्ध है।

संपर्क फ़ॉर्म बनाना

संपर्क फ़ॉर्म के माध्यम से अपने उपयोगकर्ताओं से प्रतिक्रियाएँ एकत्र करना और प्राप्त करना एक महत्वपूर्ण विशेषता है जो एक वेबसाइट के लिए आवश्यक है, क्योंकि यह आपको आगंतुकों की नज़र में भरोसेमंद बनाती है।

तो, चलिए संपर्क फ़ॉर्म बनाते हैं। अपनी App.js फ़ाइल में, निम्न कोड को कॉपी और पेस्ट करें:

 // src/App.js import React from 'react' import './App.css'; function App() { return ( <div> <h1>Contact Form</h1> <form className='cf'> <div className='half left cf'> <input type='text' placeholder='Name' name='user_name' /> <input type='email' placeholder='Email address' name='user_email' /> </div> <div className='half right cf'> <textarea name='message' type='text' placeholder='Message'></textarea> </div> <input type='submit' value='Submit' id='input-submit' /> </form> </div> ); } export default App;

संपर्क फ़ॉर्म को स्टाइल करना

एप्लिकेशन उपयोगकर्ता इंटरफ़ेस को उपयोगकर्ताओं के लिए सुंदर दिखने की आवश्यकता है, इसलिए App.css फ़ाइल में, निम्न कोड को कॉपी और पेस्ट करें:

 // src/App.css @import url(https://fonts.googleapis.com/css?family=Merriweather); html, body { background: #f1f1f1; font-family: 'Merriweather', sans-serif; padding: 1em; } h1 { text-align: center; color: #a8a8a8; } form { max-width: 600px; text-align: center; margin: 20px auto; } input, textarea { border: 0; outline: 0; padding: 1em; border-radius: 8px; display: block; width: 100%; margin-top: 1em; font-family: 'Merriweather', sans-serif; resize: none; } #input-submit { color: white; background: #e74c3c; cursor: pointer; } #input-submit:hover { box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2); } textarea { height: 126px; } .half { float: left; width: 48%; margin-bottom: 1em; } .right { width: 50%; } .left { margin-right: 2%; } @media (max-width: 480px) { .half { width: 100%; float: none; margin-bottom: 0; } } .cf:before, .cf:after { content: ' '; display: table; } .cf:after { clear: both; }

सब कुछ सही होने के साथ पेज इस तरह दिखना चाहिए:

सेटअप ईमेलजेएस

संदेश भेजने के लिए बिना किसी कार्यात्मकता के संपर्क फ़ॉर्म पृष्ठ के पूरा होने के साथ, आइए उस सेवा की स्थापना करें जो फ़ॉर्म की सामग्री को आपके ईमेल पर भेजेगी।

एक ईमेल सेवा जोड़ें

यह अनुभाग ईमेलजेएस और आपके ईमेल सर्वर के बीच एकीकरण के बारे में है। अपने ईमेलजेएस डैशबोर्ड पर, ईमेल सेवा टैब से जीमेल सेवा चुनें, जिसे एक नया पेज खोलना चाहिए जिसे कॉन्फिग सर्विस कहा जाता है।

इसके बाद, नाम और सेवा आईडी पैरामीटर बदलें। सेवा आईडी का उपयोग बाद में संपर्क फ़ॉर्म को ईमेलजेएस से जोड़ने के लिए प्रारंभ करते समय किया जाएगा। अपने परिवर्तनों की पुष्टि करने के लिए कनेक्ट अकाउंट और क्रिएट सर्विस बटन पर क्लिक करना सुनिश्चित करें।

एक ईमेल टेम्पलेट बनाना

जब कोई उपयोगकर्ता आपकी वेबसाइट के क्लाइंट-साइड से संदेश भेजता है तो ईमेल टेम्प्लेट आवश्यक होता है जब आप ईमेल का विषय, उसमें शामिल सामग्री और आपके इनबॉक्स में उसके गंतव्य को शामिल करना चाहते हैं।

डैशबोर्ड पर, ईमेल टेम्प्लेट टैब पर क्लिक करें और नया टेम्प्लेट बनाएं ।

इसके बाद, आपको सेटिंग टैब पर क्लिक करना होगा और नाम और टेम्पलेट आईडी को अपनी इच्छानुसार किसी भी चीज़ में बदलना होगा। टेम्प्लेट आईडी का उपयोग बाद में किया जाएगा, जैसा कि नीचे दी गई छवि में दिखाया गया है:

सामग्री टैब पर वापस जाने पर, घुंघराले कोष्ठक के अंदर के मान गतिशील चर होते हैं जिनका वही मान होना चाहिए जो संपर्क फ़ॉर्म में <form> तत्व में परिभाषित किया गया है, जैसे संदेश , user_name , और user_email ।

पर्यावरण चर बनाना

पर्यावरण चर .env एक फ़ाइल है जो आपकी सार्वजनिक कुंजी और अन्य मूल्यों को संग्रहीत करती है जिन्हें आप साझा नहीं करना चाहते हैं और यह केवल आपके लिए निजी है।

अपनी प्रोजेक्ट निर्देशिका के मूल में, एक फ़ाइल बनाएं, .env , और निम्नलिखित पेस्ट करें:

 // .env REACT_APP_TEMPLATE_ID=TEMPLATE_ID REACT_APP_SERVICE_ID=SERVICE_ID REACT_APP_PUBLIC_KEY=API_PUBLIC_KEY

सार्वजनिक कुंजी के लिए, आप इसे Account टैब पर क्लिक करके और public key अनुभाग में दिखाए गए मान की प्रतिलिपि बनाकर पा सकते हैं:

ईमेलजेएस को इनिशियलाइज़ करें

रिएक्ट एप्लिकेशन में, स्थापित पैकेज, @emailjs/browser पैकेज आयात करें।

निम्नलिखित को कॉपी और पेस्ट करें:

 // src/App.js import React from 'react' import emailjs from '@emailjs/browser'; function App() { return ( <div> // form element </div> ); } export default App;

हैंडलिंग फॉर्म सबमिशन

useRef हुक संपर्क फ़ॉर्म सबमिशन को संभालता है।

App.js फ़ाइल में कोड को कॉपी और अपडेट करें:

 // src/App.js import React, { useRef } from 'react'; // imports function App() { const form = useRef(); const sendEmail = (e) => { e.preventDefault(); emailjs .sendForm( process.env.REACT_APP_SERVICE_ID, process.env.REACT_APP_TEMPLATE_ID, form.current, process.env.REACT_APP_PUBLIC_KEY ) .then( (result) => { alert('message sent successfully...'); console.log(result.text); }, (error) => { console.log(error.text); } ); }; return ( <div> <h1>Contact Form</h1> <form className='cf' ref={form} onSubmit={sendEmail}> // div container with input element </form> </div> ); } export default App;

उपरोक्त कोड में निम्नलिखित होता है:

• useRef हुक आयात किया जाता है और फॉर्म नामक एक चर के साथ आरंभ किया जाता है
• हुक, useRef , का उपयोग संदर्भ के रूप में किया जाता है और <form> तत्व को सौंपा जाता है
• sendEmail फ़ंक्शन पर, प्रपत्र में रोकथाम preventDefault विधि होती है जो पृष्ठ को रीफ़्रेश होने से रोकती है
• फिर भी, sendForm sendEmail को service ID , template ID , form .current . ref की वर्तमान संपत्ति और public key के साथ प्रारंभ किया जाता है और प्रारंभ किया जाता है
• सफलता और विफलता के मामलों के लिए कॉलबैक फ़ंक्शन जो .then() विधि के साथ होता है

आइए अब इस परियोजना के परिणाम देखें:

पुष्टिकरण ईमेल

निष्कर्ष

अपने आवेदन के क्लाइंट-साइड पर डेटा अनुरोधों को संभालने के लिए ईमेलजेएस का उपयोग करना संपर्क फ़ॉर्म से प्रतिक्रिया प्राप्त करने का एक शानदार तरीका है। ईमेलजेएस आपके सर्वर का निर्माण किए बिना या बैकएंड विकास के ज्ञान के बिना आपको तलाशने के लिए अन्य सुविधाएं प्रदान करता है और आपको एक मजबूत अनुभव प्रदान करता है। यह हुड के तहत आपके लिए सब कुछ करता है।

क्या आपने पहले ईमेलजेएस का इस्तेमाल किया है? ऊपर मेरे दृष्टिकोण के बारे में आप क्या सोचते हैं? नीचे टिप्पणी करके हमें बताएं!